<template>
	<div class="panduan">
		<div class="question">
			<div class="title">
				<span>{{ questIndex }}.判断题</span>
			</div>
			<div class="question">


				<template v-for="(item,index) in question.quest.question[0].value" :key = "index">
					<p v-if="item !==''">
						{{ item }}
					</p>
				</template>
				<template v-for="(item,index) in question.quest.subQuestion[0].question" :key ="index">
					<template v-if="item.type ==='text'">
						<p v-for="(item1,index1) in item.value" :key = "index1">
							{{ item1 }}
						</p>
					</template>
					<template v-else-if="item.type==='audio'">
						<div class="iconBox">
							<img src="@/assets/audio.png" @click="handlePlay(item.value,'question')">
						</div>
					</template>
					<template v-else-if="item.type==='picture'">
						<div class="iconBox">
							<el-image
								style="width: 150px; height: 150px"
								:src="item.value"
								:preview-src-list="[String(item.value)]"
								:initial-index="0"
								fit="contain"
							/>
						</div>
					</template>
					<template v-else-if="item.type==='video'">
						<div class="iconBox">
							<video controls width="250">
								<source :src="item.value" type="video/webm"/>
							</video>
						</div>
					</template>
				</template>
				<div class="answer">
					<el-radio-group
						v-model="state.radio1"
						class="radio"
						v-if="judgeSingleOrMultiple(question)"
					>
						<el-radio
							:label="value.name"
							v-for="(value,key) in question.quest.subQuestion[0].content.value"
							:key="key"
							class="perRadio"
							@change="setUserAnswer"
						>
							<div v-if="key===0">
								<div v-if="['.jpg','.png','.jpeg'].includes(value.option.slice(-4))">
									<span class="image">
										<img :src="value.option" alt="图片" width="50px" height="50px">
									</span>
								</div>
								<div v-else-if="['.mp3','.m4a'].includes(value.option.slice(-4))">
									<img src="@/assets/audio.png" @click="handlePlay(value.option)">
								</div>
								<div v-else>
									<div class="option" v-if="value.option ==='right'">
										<el-icon><Check /></el-icon>
									</div>
									<div class="option" v-else>
										<el-icon><Close /></el-icon>
									</div>
								</div>
							</div>
							<div v-if="key===1">
								<div v-if="['.jpg','.png','.jpeg'].includes(value.option.slice(-4))">

									<span class="image">
										<img :src="value.option" alt="图片" width="50px" height="50px">
									</span>
								</div>
								<div v-else-if="['.mp3','.m4a'].includes(value.option.slice(-4))">
									<img src="@/assets/audio.png" @click="handlePlay(value.option)">

								</div>
								<div v-else>
									<div class="option" v-if="value.option ==='right'">
										<el-icon><Check /></el-icon>
									</div>
									<div class="option" v-else>
										<el-icon><Close /></el-icon>
									</div>
								</div>
							</div>
						</el-radio>
					</el-radio-group>
				</div>
			</div>

		</div>
	</div>
</template>
<script setup lang="ts">

import {toRefs, defineProps, reactive, PropType, Ref} from 'vue'
import {Check, Close, CloseBold, Service} from "eleicon";
import {useDataStore} from "@/stores/useDataStore";

const props = defineProps({
	//子组件接收父组件传递过来的值
	question: {
		type: Object as PropType<{ quest: {subQuestion: Array<any>,question: Array<any>}, seqNum: number }>,
	},
	questIndex: {
		type: Number
	},
	seq: {
		type: Number
	}
})

const { question,questIndex,seq } = toRefs(props) as { question: Ref<{ quest: { subQuestion: Array<any> ,question: Array<any>}, seqNum: number }>, questIndex: Ref<number>,seq: Ref<number>}

const userAnswerState = useDataStore();

const state = reactive({
	radio1: '1',
	checkBox: [],
})

const judgeSingleOrMultiple = (item: any) => {
	return item.quest.subQuestion[0].answer.value.length === 1;
}

const isHaveStaticSource = (item: { quest: { subQuestion: { question: { type: string; }[]; }[]; }; }) => {
	if (item.quest.subQuestion[0].question[0] && item.quest.subQuestion[0].question[0].type === 'audio'){
		return 'audio'
	} else if (item.quest.subQuestion[0].question[0] && item.quest.subQuestion[0].question[0].type === 'picture'){
		return 'picture'
	} else if (item.quest.subQuestion[0].question[0] && item.quest.subQuestion[0].question[0].type === 'video'){
		return 'video'
	}
}

const handlePlay = (source: string,question?: string) => {
    if (!question){
      setUserAnswer();

    }
	if (userAnswerState.currentAudio) {
		userAnswerState.currentAudio.pause(); // 暂停当前音频
		userAnswerState.currentAudio = null; // 释放当前音频
	}

	userAnswerState.currentAudio = new Audio(source) as any; // 创建新的 Audio 对象
	userAnswerState.currentAudio?.play(); // 播放音频
}


const setUserAnswer = () => {
	const payload = {
		template: question?.value?.quest.subQuestion[0].template,
		userAnswer: judgeSingleOrMultiple(question?.value) ? [state.radio1] : state.checkBox
	};
	userAnswerState.setUserAnswer(payload, seq.value-1);
	console.log(userAnswerState.userAnswer)
}
</script>



<style scoped lang="scss">
.panduan {
	img {
		width: 30px;
		height: 30px;
		object-fit: contain;
	}
	.question {
		margin-bottom: 20px;

		.title {
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 10px;
			color: #6a727f;
		}
		.dot {
			font-weight: 700;
			color: #5189dd;
			margin-right: 5px;
		}

		.question {
			font-size: 18px;
			color: #7c7787;
			text-indent: 2em;

			.iconBox {
				display: flex;
				justify-content: center;
				margin-top: 20px;
				text-indent: 0;
				.icon {
					font-size: 30px;
				}

			}
			.answer {
				display: flex;
				margin-top: 20px;

				.radio {
					display: flex;
					//flex-flow: column nowrap;
					//align-items: flex-start;
					:deep(.el-radio__input) {
						display: inline-block;
					}

					:deep(.el-radio__label) {
						padding-left: 0;
						margin-left: -25px;
					}

					.image {
						width: 50px;
						height: 50px;
					}

					.icon {
						font-size: 30px;
					}

					.perRadio {
						height: fit-content;
						margin-bottom: 10px;
					}
				}
				.checkBox {
					display: flex;
					//flex-flow: column nowrap;
					//align-items: flex-start;
					:deep(.el-checkbox__input) {
						display: inline-block;
					}

					:deep(.el-checkbox__label) {
						padding-left: 0;
						margin-left: -25px;
					}
					.check {
						height: fit-content;
						margin-bottom: 10px;
					}

					.image {
						width: 50px;
						height: 50px;
					}

					.icon {
						font-size: 30px;
					}
				}
			}
		}

	}

	.option {
		//display: flex;
		//justify-content: center;
		font-size: 40px;
	}
}
</style>